<style type="text/css">
    .hide{display: none;}
    .clear{clear: both;}
    .laydate-time-list{padding-bottom:0;overflow:hidden}
    .laydate-time-list>li{width:50%!important;}
    .laydate-time-list>li:last-child { display: none;}
</style>
<script>
    var baseUrl = "<?php echo $baseUrl; ?>&t=1";
</script>

<div class="layui-row search-row" id="search-box">
    <div class="item">
        <div class="row" style="width: 330px">
            <div class="box">
                <span class="title">班次类型：</span>
                <div data-key="type" data-type="list" class="search-key list" >
                    <ul>
                        <li><span data-value="1">固定班次</span></li>
                        <li><span data-value="2">流水班次</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="row" style="width: 330px">
            <div class="box">
                <span class="title">状态：</span>
                <div data-key="status" data-type="list" class="search-key list" >
                    <ul>
                        <li><span data-value="1">启用</span></li>
                        <li><span data-value="2">停用</span></li>
                    </ul>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="row" style="width: 330px">
            <div class="box">
                <span class="title">发车时间：</span>
                <div class="txt" >
                    <span data-key="departuretime" data-type="txt" class="search-key"><input type="text" id="search-departuretime" readonly style="width: 250px;" placeholder=""/></span>
                </div>
            </div>
        </div>
    </div>
    <div class="item">
        <div class="row" style="width: 500px">
            <div class="box">
                <span class="title">线路：</span>
                <div  data-key="circuit_id" data-type="select" class="txt search-key" >
                    <select name="circuit_id" lay-filter="circuit_id" class="select" style="width: 190px;">
                        <option value="0">请选择</option>
                        <?php foreach ($allCircuit as $key => $value) { ?>
                            <option value="<?php echo $value['id']; ?>" <?php if($value['id'] == $circuit_id){ ?> selected <?php } ?> > <?php echo $value['name']; ?> </option>
                        <?php } ?>
                    </select>
                </div>
            </div>
        </div>
    </div>
</div>
<table data-url="<?php echo $baseUrl; ?>&action=list"
       data-search="#search-box"
       data-page=""
       data-height="full-305"
       id="data-list"
       lay-filter='data-list' style="display: none;">
    <thead>
    <tr>
        <th width="80" align="center" field="id">班次ID</th>
        <th width="160" field="name">线路名称</th>
        <th width="60" align="center" templet="#tpl-type">类型</th>
        <th width="150" align="center" field="departuretime">发车时间</th>
        <th width="100" align="center" field="ticket_price">票价</th>
        <th width="90" align="center" field="a_ticket">可售票数</th>
        <th width="100" align="center" templet="#tpl-s_ticketstr">余票情况</th>
        <th width="100" align="center" style="color: red;" field="ordernum">有效订单</th>
        <th width="100" align="center" style="color: red;" field="passengernum">有效乘客</th>
        <th width="90" align="center" field="min">起订人数</th>
        <th width="90" align="center" field="max">限制人数</th>
        <th width="80" align="center" field="models_name">车型</th>
        <th width="80" align="center" field="carnum">车辆数</th>
        <th width="80" align="center" field="inspectorname">检票员</th>
        <th width="60" align="center" templet="#tpl-status">状态</th>
        <th fixed="right" minWidth="250" toolbar="#tpl-cmd">操作</th>
    </tr>
    </thead>
</table>

<script type="text/html" id="tpl-s_ticketstr">
    <span><span {{# if(d.s_ticketstr!=d.s_ticket){ }}style="color:red;"{{# } }}>{{d.s_ticketstr}}</span>/{{d.s_ticket}}</span>
</script>

<script type="text/html" id="tpl-type">
    <span>{{d.type==1?'固定':'流水'}}</span>
</script>

<script type="text/html" id="tpl-status">
    {{# if(d.status==1){}}
    <span style="color: green;">正常</span>
    {{# }else{}}
    <span style="color: red;">停用</span>
    {{# }}}
</script>

<script type="text/html" id="tpl-cmd">
    <?php if(Cm::$app->limitPost('/platform/shift/index','save')){ ?>
        <button onclick="app.edit.update(this)" class="layui-btn layui-btn-xs">编辑</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/shift/index','info')){ ?>
        <button onclick="app.edit.info(this)" class="layui-btn layui-btn-xs">查看</button>
    <?php } ?>
    <?php if(Cm::$app->limitPost('/platform/shift/index','order')){ ?>
        <button onclick="app.order({{d.id}})" class="layui-btn layui-btn layui-btn-normal layui-btn-xs">订单统计</button>
    <?php } ?> 
    <?php if(Cm::$app->limitPost('/platform/shift/index','startstop')){ ?>
        <button onclick="app.startstop({{d.id}},{{d.status}})" class="layui-btn layui-btn {{d.status == 1 ? 'layui-btn-danger':''}} layui-btn-xs">{{d.status == 1 ? "停用":"启用"}}</button>
    <?php } ?> 
    <span style="display: none;">{{JSON.stringify(d)}}</span>
</script>

<script type="text/html" id="tpl-shift">
    <div class="layui-card" style="box-shadow: none;">
        <div class="layui-card-header">{{name}}排班</div>
        <div class="layui-card-body">
            <form class="layui-form" action="">
                <div class="layui-form-item">
                    <label class="layui-form-label">班次类型</label>
                    <div class="layui-input-inline">
                        <select lay-filter="shift_type" id="shift_type">
                            <option value="">请选择</option>
                            <option value="1">固定班次</option>
                            <option value="2">流水班次</option>
                        </select>  
                    </div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">车型</label>
                    <div class="layui-input-inline">
                        <select lay-filter="models_id" id="models_id">
                            <option value="">请选择</option>
                            <?php foreach ($carModels as $key => $value) { ?>
                                <option value="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>  
                    </div>
                </div>     

                <div class="layui-form-item">
                    <label class="layui-form-label">检票员</label>
                    <div class="layui-input-inline">
                        <select lay-filter="inspector" id="inspector">
                            <option value="">请选择</option>
                            <?php foreach ($allInspector as $key => $value) { ?>
                                <option value="<?php echo $value['id']; ?>"><?php echo $value['name']; ?></option>
                            <?php } ?>
                        </select>  
                    </div>
                </div> 

                <div class="layui-form-item">
                    <label class="layui-form-label">发车时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="departuretime"  class="layui-input" lay-verify="required" id="departuretime" placeholder="yyyy-MM-dd HH:mm" value="{{departuretime}}" readonly="readonly">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">预售时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="presaletime"  class="layui-input" lay-verify="required" id="presaletime" placeholder="yyyy-MM-dd HH:mm" readonly="readonly">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">停售时间</label>
                    <div class="layui-input-inline">
                        <input type="text" name="closingtime"  class="layui-input" lay-verify="required" id="closingtime" placeholder="yyyy-MM-dd HH:mm" readonly="readonly">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">票价</label>
                    <div class="layui-input-inline">
                        <input type="text" name="ticket_price" value="{{ticket_price}}" lay-verify="required|price" placeholder="请输入票价" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>  

                <div class="layui-form-item">
                    <label class="layui-form-label">可售票数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="a_ticket" value="{{a_ticket}}" lay-verify="required|intzeronumber" autocomplete="off" class="layui-input">
                    </div>
                    <div class="clear"></div>
                    <label class="layui-form-label"></label>
                    <div class="layui-form-mid layui-word-aux">0为无限制票数</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">余票</label>
                    <div class="layui-input-inline">
                        <input type="text" name="s_ticket" value="{{s_ticket}}" lay-verify="intzeronumber" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div> 

                <div class="layui-form-item">
                    <label class="layui-form-label">起订人数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="min" value="{{min}}" lay-verify="required|intnumber" autocomplete="off" class="layui-input">
                    </div>
                    <div class="clear"></div>
                    <label class="layui-form-label"></label>
                    <div class="layui-form-mid layui-word-aux">每单每单最少添加乘客数</div>
                </div>  

                <div class="layui-form-item">
                    <label class="layui-form-label">限制人数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="max" value="{{max}}" lay-verify="intzeronumber" autocomplete="off" class="layui-input">
                    </div>
                    <div class="clear"></div>
                    <label class="layui-form-label"></label>
                    <div class="layui-form-mid layui-word-aux">每人每单最多添加乘客数；0：无限制</div>
                </div>  

                <div class="layui-form-item">
                    <label class="layui-form-label">车辆数</label>
                    <div class="layui-input-inline">
                        <input type="text" name="carnum" value="{{carnum}}" lay-verify="intzeronumber" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux"></div>
                </div>

                <?php if(Cm::$app->limitPost('/platform/shift/index','save')){ ?>
                <div class="layui-form-item">
                    <label class="layui-form-label"></label>
                    <div class="layui-input-block">
                        <button class="layui-btn" lay-submit="" lay-filter="shift">保存</button>
                    </div>
                </div>
                <?php } ?>
            </form>
        </div>
    </div>
</script>

<script type="text/html" id="tpl-info">
    <div class="layui-card" style="box-shadow: none;">
        <div class="layui-card-header">班次详情</div>
        <div class="layui-card-body">
            <div class="layui-row">
                <label class="layui-form-label">线路名称：</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid">{{name}}</div>
                </div>
            </div> 
            <div class="layui-row">
                <label class="layui-form-label">行程：</label>
                <div class="layui-input-inline">
                    <div class="layui-form-mid">{{sname}}--{{ename}}</div>
                </div>
            </div> 
            <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">班次类型：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{type==1?'固定班次':'流水班次'}}</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">发车时间：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{departuretime}}</div>
                    </div>
                </div>    
            </div> 
            <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">票价：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{ticket_price}}元</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">检票员：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{inspectorname}}</div>
                    </div>
                </div>    
            </div> 
            <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">预售时间：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{presaletime}}</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">停售时间：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{closingtime}}</div>
                    </div>
                </div>    
            </div> 
            <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">可售票数：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{a_ticket==0?'无限':a_ticket}}张</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">余票：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{s_ticket}}张</div>
                    </div>
                </div>    
            </div> 
            <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">起订人数：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{min}}人</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">限制人数：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{max}}人</div>
                    </div>
                </div>    
            </div>  <div class="layui-row">
                <div class="layui-col-xs6"> 
                    <label class="layui-form-label">车辆数：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{carnum}}辆</div>
                    </div>    
                </div>
                <div class="layui-col-xs6">
                    <label class="layui-form-label">车型：</label>
                    <div class="layui-input-inline">
                        <div class="layui-form-mid">{{models_name}}</div>
                    </div>
                </div>    
            </div> 
        </div>
    </div>
</script>

<script type="text/html" id="tpl-order">
    <div id="order-box"></div>
</script>
<script src="<?php echo RES_URL ?>/res/js/echars/echarts.min.js"></script>
<script>
    var app = {
        tb:null,
        init: function () {
            app.tb = $('#data-list').table();
            this.laydate.init();
            this.form.init();
        },
        edit: {
            data:null,
            load: function () {

                layer.open({
                    title:false,
                    area:['500px','60%'],
                    type:1,
                    content:template('tpl-shift', this.data)
                });
                if(app.edit.data.shift_type!=0){
                    $("#shift_type").val(app.edit.data.type);
                }
                if(app.edit.data.models_id!=0){
                    $("#models_id").val(app.edit.data.models_id);
                }
                if(app.edit.data.inspector!=0){
                    $("#inspector").val(app.edit.data.inspector);
                }

                /*app.laydate.obj.render({
                    elem: '#departuretime'
                    ,type: 'datetime'
                    ,value: app.edit.data.departuretime
                    ,format: 'yyyy-MM-dd HH:mm'
                });*/
                app.laydate.obj.render({
                    elem: '#presaletime'
                    ,type: 'datetime'
                    ,value: app.edit.data.presaletime
                    ,format: 'yyyy-MM-dd HH:mm'
                });
                app.laydate.obj.render({
                    elem: '#closingtime'
                    ,type: 'datetime'
                    ,value: app.edit.data.closingtime
                    ,format: 'yyyy-MM-dd HH:mm'
                });
                app.form.render();
            },
            update: function (e) {
                var str=$(e).parent().find('span').html();
                var json=eval('('+str+')');
                this.data={
                    id:json.id,
                    name:json.name,
                    circuit_id:json.circuit_id,
                    ticket_price:json.ticket_price,
                    a_ticket:json.a_ticket,
                    s_ticket:json.s_ticket,
                    min:json.min,
                    max:json.max,
                    carnum:json.carnum,
                    inspector:json.inspector,
                    models_id:json.models_id,
                    departuretime:json.departuretime,
                    presaletime:json.presaletime,
                    closingtime:json.closingtime,
                    type:json.type
                };
                this.load();
            },
            info:function(e){
                var str=$(e).parent().find('span').html();
                var json=eval('('+str+')');
                layer.open({
                    title:false,
                    area:['600px','60%'],
                    type:1,
                    content:template('tpl-info', json)
                });
            }
        },
        laydate:{
            obj:null,
            init:function(){
                layui.use('laydate', function(){
                    app.laydate.obj = layui.laydate;
                    layui.laydate.render({
                        elem: '#search-departuretime'
                        ,type: 'datetime'
                        ,range: '至' //或 range: '~' 来自定义分割字符
                        ,done:function () {
                            setTimeout(function () {
                                app.tb.search();
                            },200)
                        }
                    });
                });
            }
        },
        form: {
            obj: null,
            init: function () {
                var form = layui.form;
                form.verify({
                    intnumber: [
                        /^([1-9]|[1-9]\d+)$/
                        , '请填写大于0的整数！'
                    ],
                    intzeronumber:[
                        /^([0-9]|[1-9]\d+)$/
                        , '请填写大于等于0的整数！'
                    ],
                    price:[
                        /(^[1-9](\d+)?(\.\d{1,2})?$)|(^0$)|(^\d\.\d{1,2}$)/
                        , '请填写大于0的2位小数！'
                    ]
                });
                form.render();

                form.on('select(shift_type)',function(data){
                    app.edit.data.type = data.value;
                });
                form.on('select(models_id)',function(data){
                    app.edit.data.models_id = data.value;
                });
                form.on('select(inspector)',function(data){
                    app.edit.data.inspector = data.value;
                });
                form.on('submit(shift)', function (data) {
                    if(data.field.ticket_price == 0 ){
                        layer.msg("请输入大于0的价格!", {icon: 5});
                        return false;
                    }
                    if(app.edit.data.type==''){
                        layer.msg("请选择班次类型!", {icon: 5});
                        return false;    
                    }
                    if(app.edit.data.models_id==''){
                        layer.msg("请选择车型!", {icon: 5});
                        return false;    
                    }
                    if(app.edit.data.inspector == ''){
                        layer.msg("请选择检票员!", {icon: 5});
                        return false;        
                    }
                    app.edit.data.departuretime = data.field.departuretime;
                    app.edit.data.presaletime = data.field.presaletime;
                    app.edit.data.closingtime = data.field.closingtime;
                    app.edit.data.ticket_price = data.field.ticket_price;
                    app.edit.data.a_ticket = data.field.a_ticket;
                    app.edit.data.s_ticket = data.field.s_ticket;
                    app.edit.data.min = data.field.min;
                    app.edit.data.max = data.field.max;
                    app.edit.data.carnum = data.field.carnum;
                    app.save();
                    return false;
                });

                this.obj = form;
            },
            render: function () {
                this.obj.render();
            }
        },
        save:function () {
            $.post(baseUrl+'&action=save',this.edit.data,function (d) {
                if(d.flag)
                {
                    layer.closeAll();
                    layer.msg(d.msg);
                    $('#data-list').table();
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        order:function(id){
            $.post(baseUrl+"&action=order",{id:id},function (d) {
                if(d.flag)
                {
                    layer.open({
                        title:false,
                        area:['80%','300PX'],
                        type:1,
                        content:template('tpl-order', {}),
                        success: function(layero, index){
                            var height = $("#layui-layer" + index).height()-50;
                            var width = $("#layui-layer" + index).width()-50; 
                            $("#layui-layer" + index +" #order-box").attr("style","height:"+height+"px;width:"+width+"px;margin-left:25px;margin-top:25px;");
                            var option = {
                                    tooltip: {
                                        trigger: 'axis',
                                        axisPointer: {
                                            type: 'cross',
                                            crossStyle: {
                                                color: '#999'
                                            }
                                        }
                                    },
                                    toolbox: {
                                        feature: {
                                            dataView: {show: true, readOnly: false},
                                            magicType: {show: true, type: ['line', 'bar']},
                                            restore: {show: true},
                                            saveAsImage: {show: true}
                                        }
                                    },
                                    legend: {
                                        data: d.data.name
                                    },
                                    xAxis: [
                                        {
                                            type: 'category',
                                            data: d.data.name,
                                            axisPointer: {
                                                type: 'shadow'
                                            }
                                        }
                                    ],
                                    yAxis: [
                                        {
                                            type: 'value',
                                            name: '笔',
                                            min: 0,
                                            axisLabel: {
                                                formatter: '{value}'
                                            }
                                        }
                                    ],
                                    series: d.data.data
                                };
                            echarts.init(document.getElementById('order-box')).setOption(option);
                        }
                    });  
                }else{
                    layer.msg(d.msg);
                }
            },'json')
        },
        startstop:function(id,status){
            var str = status==1 ? '停用' : '启用';
            layer.msg("确定要"+str+"该班次吗？", {
                time: false, //20s后自动关闭
                btn: ['确定', '取消'],
                yes:function () {
                    $.post(baseUrl+'&action=startstop',{id:id,status:status},function (d) {
                        layer.closeAll();
                        if(d.flag)
                        {
                            layer.msg(str+'成功');
                            $('#data-list').table();
                        }else{
                            layer.msg(d.msg);
                        }
                    },'json')
                }
            });
        }
    };

    app.init();
</script>